<template>
  <div id="app">
    <div class="b1b">
      <div class="b1b1">
        <img src="https://hbimg.huabanimg.com/18e76271c0bf9b345663414730fa4021e5fa0cd03f87-ZnkkN4_fw658/format/webp" alt=""/>
          <span>新冠疫苗 · 排队系统</span>
      </div>
      <div class="b1b2">
        <div class="b1b2b1"></div>
        <input type="text" placeholder="姓名" class="b1b2b2" />
        <div class="b1b2b3">搜 索</div>
      </div>
    </div>
    <div class="b2b">
      <div class="b2b1">
        <div class="b2b1b1">
          <ul>
            <li :class="flag01?'active':''" @click="dianji01">{{tab[0]}}</li>
            <li :class="flag02?'active':''" @click="dianji02">{{tab[1]}}</li>
          </ul>
        </div>
        <div class="b2b1b2">
          <div class="b2b1b2b1">排队人</div>
          <ul v-if="flag01">
            <li v-for="(item,index) in wait" :key="item.id"  >
              <div class="w_name">{{index+1}}.{{item.pname}}</div>
              <div class="w_timeout">
                <span>{{Math.floor(item.pdate/60)>=10?Math.floor(item.pdate/60):'0'+Math.floor(item.pdate/60)}}</span>:<span>{{item.pdate%60>=10?item.pdate%60:'0'+item.pdate%60}}</span>
              </div>
              <div class="w_del" @click="shanchu(index)">删除</div>
            </li>
          </ul>
          <ul v-if="flag02">
            <li v-for="(item,index) in finish" :key="item.id">
              <div class="w_name">{{index+1}}.{{item.pname}}</div>
              <div class="w_timeout">
                <span>{{Math.floor(item.pdate/60)>=10?Math.floor(item.pdate/60):'0'+Math.floor(item.pdate/60)}}</span>:<span>{{item.pdate%60>=10?item.pdate%60:'0'+item.pdate%60}}</span>
              </div>
              <div class="w_del">完成</div>
            </li>
          </ul>
        </div>
      </div>
      <div class="b2b2">
        <div class="b2b2b1">排队 · 领取身份证</div>
        <div class="b2b2b2">
          <div class="b2b2b2b1">
            <div class="t_title">剩余等待时间 · 排队</div>
            <ul>
              <li class="da_li" v-for="(sb,index) in first" :key="sb.id">
                <span class="t_name_da">{{index+1}}. {{sb.pname}}</span><span class="t_num_da">{{sb.ppnum}}</span>
                <div class="t_time_da"><span>{{Math.floor(sb.pdate/60)>=10?Math.floor(sb.pdate/60):'0'+Math.floor(sb.pdate/60)}} </span>:<span> {{sb.pdate%60>=10?sb.pdate%60:'0'+sb.pdate%60}}</span></div>
              </li>
            </ul>
            <ul>
              <li v-for="(sd,index) in second" :key="sd.id">
                <span class="t_name">{{index+4}}. {{sd.pname}}</span><span class="t_num">{{sd.ppnum}}</span>
                <div class="t_time"><span>{{Math.floor(sd.pdate/60)>=10?Math.floor(sd.pdate/60):'0'+Math.floor(sd.pdate/60)}} </span>:<span> {{sd.pdate%60>=10?sd.pdate%60:'0'+sd.pdate%60}}</span></div>
              </li>
            </ul>
          </div>
          <div class="b2b2b2b2">
            <div class="t_title">时间到 · 领取</div>
            <ul>
              <li v-for="(item,index) in a_wait" :key="item.id">
                <span class="f_name">{{item.pname}}</span>
                <div class="f_btn" @click="finished(index)">领 取</div>
              </li>
            </ul>
          </div>
        </div>
      </div>
      <div class="b2b3">
        <div class="b2b3b1">统计</div>
        <div class="b2b3b2"><div id="main" style="width: 240px;height:400px;"></div></div>
        <div class="b2b3b3"><div id="main01" style="width: 240px;height:260px;"></div></div>
      </div>
    </div>
    <div class="bgc" v-show="isMask">
      <div class="mask"><div>是否删除</div><button class="mask_yes" @click="shanchu_yes">删除</button><button class="mask_no" @click="shanchu_no">取消</button></div>
    </div>
  </div>
</template>

<script>
import * as echarts from 'echarts';
export default {
  name: "App",
  data () {
    return {
    tab:['等 待','完 成'],
    all_num: 12,
    all: [
      {
        id:0,
        pname: '张一',
        ppnum: 512166199901119798,
        pdate: 6
      },
      {
        id:1,
        pname: '张二',
        ppnum: 512166199901119798,
        pdate: 12
      },
      {
        id:2,
        pname: '张三',
        ppnum: 512166199901119798,
        pdate: 16
      },
      {
        id:3,
        pname: '李四',
        ppnum: 512166199901119798,
        pdate: 24
      },
      {
        id:4,
        pname: '何九九',
        ppnum: 512166199901119798,
        pdate: 36
      },
      {
        id:5,
        pname: '小呜呜',
        ppnum: 512166199901119798,
        pdate: 46
      },
      {
        id:6,
        pname: '离九',
        ppnum: 512166199901119798,
        pdate: 53
      },
      {
        id:7,
        pname: '张很牛',
        ppnum: 512166199901119798,
        pdate: 107
      },
      {
        id:8,
        pname: '小强',
        ppnum: 512166199901119798,
        pdate: 203
      },
      {
        id:9,
        pname: '张五一',
        ppnum: 512166199901119798,
        pdate: 226
      },
      {
        id:10,
        pname: '王哈哈',
        ppnum: 512166199901119798,
        pdate: 356
      },
      {
        id:11,
        pname: '曾明',
        ppnum: 512166199901119798,
        pdate: 1720
      }
    ],
    cang_all:[],
    wait: [],
    finish: [],
    select: [],
    first: [],
    second: [],
    a_wait: [],
    a_add:[],
    flag01: true,
    flag02: false,
    isMask: false,
    index_shanchu: -1
    }
  },
  mounted: function () {
    this.add()
    this.daojishi()
    this.fresh()
    var myChart = echarts.init(document.getElementById('main'));
    var myChart01 = echarts.init(document.getElementById('main01'));     
        var ayy = setInterval(()=>{
          var option = {
            title: {
                text: '人数统计'
            },
            tooltip: {},
            legend: {
                data:['人数']
            },
            xAxis: {
                data: ["全部","等待","未领","完成"]
            },
            yAxis: {},
            series: [{
                name: '人数',
                type: 'bar',
                data: [this.all_num, this.wait.length, this.a_wait.length, this.finish.length]
            }]
        };
      var option01 = {
        tooltip: {
            trigger: 'item'
            },
            legend: {
                top: '5%',
                left: 'center'
            },
            series: [
                {
                    name: '人数',
                    type: 'pie',
                    radius: ['40%', '70%'],
                    avoidLabelOverlap: false,
                    itemStyle: {
                        borderRadius: 10,
                        borderColor: '#fff',
                        borderWidth: 2
                    },
                    label: {
                        show: false,
                        position: 'center'
                    },
                    emphasis: {
                        label: {
                            show: true,
                            fontSize: '26',
                            fontWeight: 'bold'
                        }
                    },
                    labelLine: {
                        show: false
                    },
                    data: [
                        {value: this.wait.length, name: '等待'},
                        {value: this.a_wait.length, name: '未领'},
                        {value: this.finish.length, name: '完成'}
                    ]
                }
            ]
        };
          myChart.setOption(option)
          myChart01.setOption(option01)
          },1000)
  },
  methods: {
    daojishi: function(){
      this.cang_all = this.all
     var aw = setInterval(()=>{
        for(let i = 0;i<this.all.length;i++){
          if(this.all[i].pdate>=0){
          this.all[i].pdate--}
        }
        if(this.all[0].pdate<=0){
          this.cang_all = this.all
        this.a_wait.push(this.cang_all.shift())
      }
      this.wait = this.cang_all
      },1000)
    },
    add: function(){
      var ax = setInterval(()=>{
         this.all.push({
          // id:12,
          pname: '张八',
          ppnum: 123456789456123,
          pdate: 1800,
      })
      this.all_num += 1
        //  this.p01.ppnum = this.p01.ppnum+1
        //  this.p01.id += 1
    }, 3000);},
    fresh: function(){
      setInterval(()=>{
        this.select = this.wait.slice(0,14)
      if(this.select[0]&&this.select[0].pdate<=0){
        this.await = this.select.shift()
      }
        this.first = this.select.slice(0,3)
        this.second = this.select.slice(3,14)
        // console.log("123")
      },500)
    },
    shanchu: function(index){
      this.isMask = true
      this.index_shanchu = index
    },
    shanchu_yes: function(){
       for(let i = 0;i < this.wait.length; i++){
        if(i===this.index_shanchu){
          this.wait.splice(this.index_shanchu,1)
        }
      }
      this.isMask = false
    },
    shanchu_no: function(){
      this.isMask = false
    },
    dianji01: function() {
      this.flag02=false
      this.flag01=true
    },
    dianji02: function() {
      this.flag01=false
      this.flag02=true
    },
    finished: function(index) {
      for(let i = 0;i<this.a_wait.length;i++){
        if(i===index){
          this.finish.push(this.a_wait[i])
          this.a_wait.splice(index,1)
        }
      }
    }
  }
};
</script>

<style>
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin: 0;
  position: relative;
}
.bgc {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(20,20,20,0.3);
}
.mask {
  position: absolute;
  left:50%;
  top:50%;
  transform: translate(-50%,-50%);
  width: 600px;
  height: 300px;
  border-radius: 16px;
  background-color: rgb(149, 149, 149);
  font-size: 32px;
  line-height: 120px;
  color: rgb(54, 54, 54);
  z-index: 100;
}
.mask button {
  margin: 90px 20px 0;
  width: 60px;
  height: 30px;
  font-size: 16px;
}
body {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}
.b2b1b1 .active {
  background-color: rgb(199, 223, 255);
}
ul {
  padding: 0;
  margin: 0;
}

li {
  list-style: none;
}

.b1b {
  margin: 0 auto;
  width: 1200px;
  height: 120px;
  border-bottom: 4px solid #ccc;
}

.b1b1 {
  float: left;
  width: 380px;
  font-size: 24px;
  letter-spacing: 2px;
  color: #333;
}

.b1b1 img {
  overflow: hidden;
  margin: 15px 20px 0 20px;
  width: 90px;
  height: 90px;
  border-radius: 10px;
  vertical-align: middle;
}

.b1b2 {
  float: left;
  margin: 30px 20px 0 150px;
  width: 580px;
  height: 60px;
}

.b1b2b1 {
  float: left;
  margin-right: 10px;
  width: 60px;
  height: 60px;
  background: url(https://hbimg.huabanimg.com/80887c24da5e53076800071ae1432c8435699a2511b0-2t7GAS_fw658/format/webp)
    no-repeat;
  background-size: 56px 56px;
}

.b1b2b2 {
  float: left;
  margin-top: 9px;
  width: 360px;
  height: 38px;
  border-radius: 10px;
  font-size: 18px;
  outline: none;
}

.b1b2b2::placeholder {
  color: #aaa;
}

.b1b2b3 {
  float: left;
  margin: 8px 0 0 8px;
  width: 80px;
  height: 45px;
  background-color: #eee;
  border-radius: 10px;
  border: 2px solid #ccc;
  cursor: pointer;
  font-size: 18px;
  text-align: center;
  line-height: 44px;
}

.b1b2b3:active {
  background-color: #b8ddb8;
}

.b2b {
  box-sizing: border-box;
  margin: 12px auto 0;
  width: 1200px;
  height: 720px;
  /* background-color: #666; */
}

.b2b1 {
  float: left;
  width: 230px;
  height: 720px;
  background-color: #eee;
}

.b2b1b1 {
  box-sizing: border-box;
  width: 230px;
  height: 80px;
  background-color: #999;
}

.b2b1b1 ul {
  margin: 0;
  padding: 0;
}

.b2b1b1 ul li {
  float: left;
  margin: 21px 11px 0px 11px;
  width: 90px;
  height: 40px;
  border-radius: 12px;
  font-size: 18px;
  line-height: 42px;
  font-weight: 700;
  text-align: center;
  letter-spacing: 4px;
  color: rgb(49, 130, 184);
  background-color: rgb(255, 255, 255);
  cursor: pointer;
}

.b2b1b2 {
  overflow: auto;
  box-sizing: border-box;
  width: 230px;
  height: 636px;
  /* background-color: #ccc; */
}

.b2b1b2b1 {
  border-bottom: 2px solid rgb(52, 115, 173);
  font-size: 18px;
  line-height: 26px;
  text-align: left;
  font-weight: 700;
  color: #333;
}

.b2b1b2 li {
  width: 212px;
  height: 26px;
  border-bottom: 2px solid rgb(222, 227, 228);
  background-color: #eee;
}

.w_name {
  float: left;
  margin-left: 8px;
  width: 92px;
  font-size: 14px;
  line-height: 25px;
  text-align: left;
  letter-spacing: 0;
  color: #333;
}

.w_timeout {
  float: left;
  margin-left: 8px;
  font-size: 16px;
  line-height: 25px;
  letter-spacing: 2px;
  color: rgb(216, 20, 20);
}

.w_del {
  float: right;
  margin-right: 12px;
  cursor: pointer;
  font-size: 14px;
  line-height: 25px;
  letter-spacing: 2px;
  color: rgb(160, 137, 137);
}

.b2b2 {
  float: left;
  margin-left: 10px;
  width: 710px;
  height: 720px;
  /* background-color: rgb(161, 161, 161); */
}

.b2b2b1 {
  margin: 0;
  padding: 0;
  width: 710px;
  height: 80px;
  font-size: 26px;
  text-align: center;
  line-height: 78px;
  letter-spacing: 2px;
  font-weight: 700;
  background-color: #999;
}

.b2b2b2b1 {
  float: left;
  width: 470px;
  height: 640px;
  /* background-color: red; */
}

.b2b2b2b2 {
  overflow: auto;
  float: left;
  margin-left: 10px;
  width: 230px;
  height: 640px;
  background-color: rgb(241, 241, 241);
}

.t_title {
  height: 45px;
  border-bottom: 2px solid rgb(52, 115, 173);
  font-size: 22px;
  line-height: 44px;
  letter-spacing: 2px;
  text-align: center;
  font-weight: 700;
  color: rgb(221, 57, 57);
}

.b2b2b2b1 li {
  height: 38px;
  border-bottom: 2px solid rgb(109, 98, 98);
  font-size: 18px;
  line-height: 38px;
  letter-spacing: 1px;
  color: #333;
}

.t_name {
  float: left;
  margin-left: 16px;
  width: 120px;
  font-weight: 700;
  text-align: left;
  color: rgb(28, 107, 197);
}

.t_num {
  float: left;
  margin-left: 20px;
  width: 200px;
  font-size: 14px;
}

.t_time {
  float: right;
  margin-right: 12px;
  font-weight: 700;
  color: rgb(221, 57, 57);
}

.b2b2b2b1 .da_li {
  border-bottom: 2px solid rgb(109, 98, 98);
  font-size: 22px;
  line-height: 40px;
  letter-spacing: 1px;
  color: #333;
}

.t_name_da {
  float: left;
  margin-left: 16px;
  width: 134px;
  font-weight: 700;
  text-align: left;
  color: rgb(35, 156, 255);
}

.t_num_da {
  float: left;
  margin-left: 6px;
  width: 200px;
  font-size: 16px;
}

.t_time_da {
  float: right;
  margin-right: 12px;
  font-weight: 700;
  color: rgb(221, 57, 57);
}

.b2b2b2b2 li {
  width: 215px;
  height: 30px;
  border-bottom: 2px solid rgb(109, 98, 98);
  font-size: 15px;
  line-height: 30px;
  text-align: left;
  font-weight: 700;
  letter-spacing: 2px;
  color: rgb(2, 107, 192);
}

.f_name {
  float: left;
  margin-left: 16px;
  width: 110px;
  text-align: left;
}

.f_btn {
  float: right;
  margin: 2px 12px 0 0;
  width: 56px;
  height: 24px;
  border-radius: 6px;
  font-size: 16px;
  line-height: 24px;
  font-weight: 700;
  text-align: center;
  color: #fff;
  background-color: rgb(14, 103, 204);
  cursor: pointer;
}

.f_btn:active {
  background-color: rgb(22, 12, 158);
}

.b2b3 {
  float: left;
  margin-left: 10px;
  width: 240px;
}

.b2b3b1 {
  margin: 0;
  padding: 0;
  width: 240px;
  height: 80px;
  font-size: 26px;
  text-align: center;
  line-height: 78px;
  letter-spacing: 2px;
  font-weight: 700;
  background-color: #999;
}

.b2b3b2 {
  width: 240px;
  height: 380px;
  background-color: rgb(255, 255, 255);
}

.b2b3b3 {
  width: 240px;
  height: 260px;
  background-color: #eee;
}
</style>
